<template>
	<view class="u-page">
		<u-transition :show="true" mode="fade-up">
			<view class="u-page2 u-flex-column">
				<u-gap :height="vxbottom+20"></u-gap>
				<view style="display: flex;">
					<view
						style="display: flex;justify-content: center;height: 200rpx;align-items: center;margin-left: 10rpx;margin-right: 10rpx;">
						<image style="display: flex;justify-content: center;height: 100rpx;width:100rpx"
							:src="model1.user.head"></image>
					</view>
					<view style="display: flex;justify-content: flex-start;align-items: center; flex:1 1 auto">
						{{model1.user.name}}
					</view>
					<view class="u-flex-end u-flex-xy-center">
						<xbutton mini txt="签到" @click="qd()"></xbutton>
					</view>
				</view>
				<view v-if="model1.user.vip==0" class="vip">
					<view>
						<text class="txt">开通香了么vip 享受最高优惠</text>
					</view>
					<view class="btn txt2">
						<text>立即开通</text>
					</view>
				</view>
				<view v-else class="vip">
					<view class="txt">
						<text>xx到期</text>
					</view>
					<view class="btn txt2">
						<text>立即续费</text>
					</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view class="xxkj" @click="x()">
						<image class="xxkji" src="/static/dd.png"></image>
						我的订单
					</view>
					<view class="xxkj" @click="y()">
						<image class="xxkji" src="/static/yq.png"></image>
						我的邀请
					</view>
					<view class="xxkj" @click="z()">
						<image class="xxkji" src="/static/jm.png"></image>
						加盟合作
					</view>
					<view class="xxkj" @click="zz()">
						<image class="xxkji" src="/static/skm.png"></image>
						收款信息
					</view>
				</view>
			</view>
			<u-modal :show="show" @confirm="e()" >
				<image src=""></image>
			</u-modal>
			<u-modal :closeOnClickOverlay="true" @cancel="()=> show2=false" :showCancelButton="true" :show="show2"
				@confirm="ee()">
				<u-form :model="model1" ref="form1" :rules="rules" style="width: 100%;">
					<u-form-item label="支付宝账号:" labelWidth="80" prop="user.alipay" borderBottom ref="item1">
						<u-input v-model="model1.user.alipay" border="none"></u-input>
					</u-form-item>
					<u-form-item label="微信收款码:" labelWidth="80" prop="user.wximg" borderBottom ref="item2">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1"></u-upload>
					</u-form-item>
				</u-form>
			</u-modal>
		</u-transition>
		<widget name="buttom"></widget>
	</view>
</template>

<script>
	import widget from "../service/widget"
	import xbutton from "../vue/xbutton.vue"
	export default {
		data() {
			return {
				fileList1: [],
				userid: 0,
				show: false,
				img: "",
				show2: false,
				vxbottom: 0,
				model1: {
					user: {}
				},
				rules: {
					'user.alipay': [{
						type: 'string',
						required: true,
						message: '请填写支付宝',
						trigger: ['blur', 'change']
					},{
						max: 20,
						type: 'string',
						required: true,
						message: '填写过长',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			// #ifdef MP-WEIXIN
			this.$refs.form1.setRules(this.rules)
			// #endif
		},
		methods: {
			ee() {
				let that = this
				this.$refs.form1.validate().then(res => {
					let t = that.model1.user
					that.$http.postf('user/updatealipay', {
						userid: t.id,
						alipay: t.alipay
					}).then(res => {
						if (res.statusCode == 200) {
							let x = JSON.parse(res.data).meta
							if (x.code == 200) {
								uni.showToast({
									title: '提交成功',
									success: function() {
										that.show2 = false
									}
								})

							} else {
								that.show = true
								return
							}
						}
					})

				}).catch(errors => {
					uni.$u.toast('校验失败')
					return false
				})
			},
			zz() {
				this.show2 = true
			},
			x() {
				this.$store.commit("clickicon", 1)
				// 在C页面内 navigateBack，将返回A页面
				uni.reLaunch({
					url: '../order/order'
				})
			},
			y() {
				uni.navigateTo({
					url: '/pages/my/yq'
				})
			},
			z() {
				// #ifdef MP-WEIXIN
				uni.makePhoneCall({
					// 手机号
					phoneNumber: '19937674479',
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				this.show = true
				// #endif
			},
			e() {
				this.show = false
			}
		},
		mounted() {
			this.userid = uni.getStorageSync('userid');
			this.$http.postf('user/find', {
				id: this.userid
			}).then(res => {
				let x = JSON.parse(res.data)
				if (x.meta.code == 200) {
					this.model1.user = x.data
				} else if (x.meta.code == 400) {

				}

			})
		},
		created() {
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.vxbottom = menuButtonInfo.bottom
			// #endif
		},
		components: {
			widget,
			xbutton
		}
	}
</script>

<style>
	.vip {
		height: 150rpx;
		background: linear-gradient(125deg, #504a46, #39332e 88%);
		border-radius: 8px 8px 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 11px;
		margin-top: 16px;
		color: white;
	}

	.btn {
		width: 82px;
		height: 26px;
		background: linear-gradient(180deg, #fbe0c2, #fdd9b3);
		border-radius: 13px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .5);
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.xxkj {
		height: 150rpx;
		display: flex;
		align-items: center;
	}

	.xxkji {
		display: flex;
		justify-content: center;
		height: 100rpx;
		width: 100rpx;
		margin: 10rpx;
	}

	.txt2 {
		font-size: 13px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		color: #504a46;
		line-height: 18px;
		margin-left: 7px;
	}

	.txt {
		font-size: 13px;
		font-family: PingFangSC, PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		color: #e9dcbe;
		line-height: 18px;
		margin-left: 7px;
	}
</style>
